<template>
	<base-popup :modelValue="walletStore.showWithdrawValidate" @close="onClose">
		<div class="validate-container">
			<div class="validate-entrance">
				<div class="unlock">{{ $t('validate.unlockWithdraw') }}</div>
				<p class="subtitle">{{ $t('validate.subtitleWithdraw') }}</p>
				<div class="validate-bg">
					<base-icon name="withdraw" class="text-[60px]" />
				</div>
			</div>
			<div class="schedule">
				<div
					v-for="item in buttonList"
					:key="item.key"
					class="schedule-item flex flex-cross-center justify-content-center">
					<p class="text flex-cross-center">
						<i class="tag" />
						{{ $t(item.name) }}
					</p>
					<div class="status">
						<base-icon v-if="showStatus(item.key)" name="tick" size="20" />
						<span v-else class="active cursor-pointer" @click="handleModal(item)">
							{{ $t(item.btnText) }}
						</span>
					</div>
				</div>
			</div>
		</div>
		<div class="later cursor-pointer" @click="onClose">{{ $t('validate.withdrawLater') }}</div>
	</base-popup>

	<profile-birthday v-model="birthdayShow" @success="onSuccessBirthday" />
	<profile-realname v-model="realnameShow" @success="onSuccessRealname" />
</template>

<script lang="ts" setup>
import { ref, watch, computed } from 'vue'
import { useAppStore, useProfileStore, useWalletStore } from '@/store'
import { BasePopup, BaseIcon } from '@/components/base'
import ProfileBirthday from '@/components/profile/birthday/index.vue'
import ProfileRealname from '@/components/profile/realname/index.vue'
// import { computed } from 'vue/dist/vue'
import { RfcActivityAwardList } from '@/enums'

const store = useAppStore()
const walletStore = useWalletStore()
const profileStore = useProfileStore()
const birthdayShow = ref(false)
const realnameShow = ref(false)

const onClose = () => {
	walletStore.setWithdrawValidateShow(false)
}

const handleModal = (val: any) => {
	switch (val.path) {
		case 'binding':
			onClickBinding(val.type)
			return false
		case 'realname':
			return (realnameShow.value = true)
		case 'birthday':
			return (birthdayShow.value = true)
	}
}

const onClickBinding = (type: string) => {
	profileStore.setBindingPopupShow(true)
	profileStore.setBindingTab(type)
}
const onSuccessBirthday = () => {
	birthdayShow.value = false
}

const onSuccessRealname = () => {
	realnameShow.value = false
}

const isUSDTUser = computed(() => store.isUsdt)
const buttonList = computed(() => {
	const list = RfcActivityAwardList.slice()
	if (isUSDTUser.value) {
		return list.filter((item) => item.key !== 'mobile')
	}
	return list
})

const showStatus = (key: string) => {
	// console.log('userInfo  = ', profileStore.userInfo)
	const email = computed(() => profileStore.userInfo?.email)
	const realName = computed(() => profileStore.userInfo?.realName)
	const birthday = computed(() => profileStore.userInfo?.birthday)
	const mobile = computed(() => profileStore.userInfo?.mobile)
	if (buttonList.value.length >= 4) {
		if (email.value && mobile.value && realName.value && birthday.value) {
			walletStore.setWithdrawValidateShow(false)
			return false
		}
	} else {
		if ((email.value || mobile.value) && realName.value && birthday.value) {
			// walletStore.setWithdrawValidateShow(false)
			return false
		}
	}
	switch (key) {
		case 'mobile':
			return !!mobile.value
		case 'email':
			return !!email.value
		case 'realName':
			return !!realName.value
		case 'birthday':
			return !!birthday.value
	}
}

watch(
	() => walletStore.showWithdrawValidate || birthdayShow.value || realnameShow.value,
	() => {
		if (
			!walletStore.showWithdrawValidate &&
			!birthdayShow.value &&
			!realnameShow.value &&
			buttonList.value.some((item) => showStatus(item.key))
		) {
			walletStore.setWithdrawValidateShow(false)
			// profileStore.getUserInfo()
		}
	}
)
</script>
<style scoped lang="scss">
.validate-container {
	font-size: 14px;
	padding: 2px 25px;

	.validate-entrance {
		padding: 0 50px;
		text-align: center;

		.unlock {
			font-size: 25px;

			color: var(--color-primary);
			line-height: 36px;
			text-align: center;
		}

		.subtitle {
			font-size: 12px;

			color: var(--color-text-1);
			margin: 7px auto 12px;
		}

		.validate-bg {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 214px;
			height: 80px;
			margin: 0 auto 30px;
			background: url('@/assets/img/wallet/validate/validate_bg@2x.png') no-repeat center center /
				100% 100%;
			overflow: hidden;

			img {
				width: 60px;
				height: 66px;
			}
		}

		.base-button {
			margin-bottom: 10px;
		}
	}

	.schedule {
		margin-top: 20px;
		border-radius: 18px;
		padding: 0 40px;
		border: 1px solid var(--color-border-2);

		.schedule-item {
			margin: 18px 0;

			.text {
				width: 50%;
				text-align: left;
				font-size: 14px;

				i.tag {
					width: 8px;
					height: 8px;
					border-radius: 8px;
					margin-right: 10px;
					background: var(--color-disable);
				}
			}

			.status {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: auto;
				min-width: 60px;
				height: 28px;
				line-height: 28px;
				text-align: center;
				color: var(--color-success);
				background: rgba(150, 165, 170, 0.17);
				border-radius: 14px;
				overflow: hidden;

				.active {
					width: 100%;
					height: 100%;
					padding: 0 6px;
					color: var(--color-white);
					background: var(--color-primary);
				}
			}
		}
	}
}

.later {
	height: 62px;
	line-height: 62px;
	font-size: 14px;

	text-align: center;
	color: var(--color-primary);
}
</style>
